$top-height: 422px;
.iot-device-home {
	display: flow-root;
	width: 100%;
	.top-card {
		width: 100%;
		.top-card-left {
			height: $top-height;
			padding: 35px;
			background: url("@/assets/images/iot/device/home/15.png") 100% 100% no-repeat;
			background-size: cover;
			.bg {
				right: 10%;
				bottom: 3%;
				width: 70%;
				opacity: 0.8;
				animation: bounce-updown 10s linear infinite;
			}
			.device-label {
				padding-top: 20px;
				font-size: 16px;
				font-weight: 700;
				color: #555555;
			}
			.device-count {
				padding-top: 30px;
				font-family: bahnschrift;
				font-size: 60px;
				font-weight: 700;
				color: #000000;
			}
			.device-diff {
				margin-top: 20px;
				font-family: "PingFang SC Bold";
				font-size: 14px;
				font-weight: 700;
				color: #000000;
				.device-diff-num {
					margin-left: 10px;
					font-family: "PingFang SC Bold";
					font-size: 14px;
					font-weight: 700;
				}
			}
		}
		.top-card-center {
			height: $top-height;
			.card-item:hover {
				img {
					transform: scale(1.5);
				}
			}
			& > div {
				padding: 30px 50px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				.label {
					font-size: 16px;
					font-weight: 700;
					color: #555555;
				}
				.value {
					display: flex;
					align-content: flex-start;
					align-items: center;
					padding-top: 20px;
					font-family: bahnschrift;
					font-size: 36px;
					font-weight: 700;
					color: #222222;
					img {
						width: 46px;
						height: 46px;
						margin-left: auto;
					}
				}
				.desc {
					margin-top: 10px;
					font-family: "PingFang SC Bold";
					font-size: 14px;
					font-weight: 700;
					color: #000000;
					.device-diff-num {
						margin-left: 10px;
						font-family: "PingFang SC Bold";
						font-size: 14px;
						font-weight: 700;
					}
				}
			}
		}
		.top-card-right {
			position: relative;
			background-color: #ffffff;
			.chart-list {
				position: absolute;
				top: 30%;
				right: 8%;
				.chart-list-item {
					display: flex;
					align-content: flex-start;
					align-items: center;
					padding: 12px 0;
					border-bottom: 1px solid #e0e7f3;
					.chart-list-item-d {
						width: 8px;
						height: 8px;
						margin-right: 16px;
						border-radius: 4px;
					}
					.chart-list-item-l {
						font-size: 14px;
						font-weight: 700;
						color: #000000;
					}
					.chart-list-item-v {
						margin-left: auto;
						font-family: bahnschrift;
						font-size: 18px;
						font-weight: 700;
						color: #222222;
					}
				}
			}
		}
	}
	.center-chart {
		width: 100%;
		height: 456px;
		margin-top: 20px;
		.center-chart-left {
			height: 100%;
			background-color: #ffffff;
			.dataTrend-title {
				display: flex;
				align-items: center;
				.dataTrend-title-data-type {
					padding: 5px 12px;
					cursor: pointer;
					&.active {
						color: #2e68ea;
						border-bottom: 2px solid #2e68ea;
					}
				}
			}
		}
		.center-chart-right {
			height: 100%;
			background-color: #ffffff;
			.basicsService {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				height: 100%;
				padding: 10px 20px;
				.basicsService-space {
					width: 50%;
					height: 80px;
					.space-title {
						font-size: 14px;
						font-weight: 700;
						color: #222222;
					}
					.space-title-content {
						display: flex;
						align-items: center;
						margin-top: 5px;
					}
					.space-value {
						font-family: bahnschrift;
						font-size: 30px;
						font-weight: 700;
						color: #222222;
					}
					.space-label {
						margin-left: 20px;
						font-size: 14px;
						font-weight: 700;
						color: #222222;
					}
					.space-diff {
						margin-left: 10px;
						font-size: 14px;
						font-weight: 700;
					}
				}
				.basicsService-progress {
					width: 100%;
					height: 40px;
					margin-bottom: 30px;
					border-bottom: 1px solid #e0e7f3;
				}
				.basicsService-port {
					.space-title {
						position: relative;
						padding-left: 25px;
						&::after {
							position: absolute;
							top: 3px;
							left: 0;
							display: block;
							width: 14px;
							height: 14px;
							content: "";
							background-color: #7baeff;
						}
					}
				}
				.basicsService-port1 {
					.space-title {
						position: relative;
						padding-left: 25px;
						&::after {
							position: absolute;
							top: 3px;
							left: 0;
							display: block;
							width: 14px;
							height: 14px;
							content: "";
							background-color: #99e6a2;
						}
					}
				}
				.basicsService-chart {
					width: 100%;
					height: 100px;
				}
			}
		}
	}
	.bottom-chart {
		width: 100%;
		height: 440px;
		margin-top: 20px;
		.bottom-chart-left {
			height: 100%;
			background-color: #ffffff;
			.operation-module {
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				.operation-module-icon {
					display: flex;
					align-items: center;
					padding: 30px 70px;
					.icon-type {
						width: 15%;
					}
					.icon-type1 {
						width: 28%;
						height: 14px;
					}
				}
				.operation-module-desc {
					display: flex;
					align-items: center;
					.operation-desc-item {
						padding: 0 50px;
						text-align: center;
						.operation-desc-item-title {
							font-size: 22px;
							font-weight: 700;
							color: #000000;
						}
						.operation-desc-item-label {
							margin-top: 5px;
							font-family: PingFang;
							font-size: 16px;
							font-weight: 500;
							color: #555555;
						}
					}
				}
			}
		}
		.bottom-chart-right {
			height: 100%;
			background-color: #ffffff;
			.card-box-content {
				padding-top: 4px;
			}
			.notice-module {
				width: 100%;
				height: 100%;
				.notice-module-item {
					display: flex;
					align-content: flex-start;
					padding: 5px 0;
					border-bottom: 1px solid #e0e7f3;
					.notice-item-type1 {
						width: 42px;
						height: 24px;
						font-size: 14px;
						font-weight: 700;
						line-height: 24px;
						color: #fe5656;
						text-align: center;
						background: rgba($color: #fe5656, $alpha: 10%);
						border-radius: 3px;
					}
					.notice-item-type2 {
						width: 42px;
						height: 24px;
						font-size: 12px;
						line-height: 24px;
						color: #2e68ea;
						text-align: center;
						background: rgba($color: #2e68ea, $alpha: 10%);
						border-radius: 5px;
					}
					.notice-item-label {
						margin-left: 23px;
						font-size: 14px;
						line-height: 24px;
						color: #555555;
					}
					.notice-item-date {
						margin-left: auto;
						font-size: 14px;
						color: #555555;
					}
				}
			}
		}
	}
}
.num-label-up {
	color: #fe5656;
}
.num-label-down {
	color: #01b46d;
}
